<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>

	<script>
		const data = [{
				code: "110000",
				name: "北京市",
				province: "11"
			},
			{
				code: "120000",
				name: "天津市",
				province: "12"
			},
			{
				code: "130000",
				name: "河北省",
				province: "13"
			},
		]

		// 核心：对于下拉框，区分 innerHTML 与 value 的区别

		// 需求：将数据渲染到省份下拉框中
		const htmlStr = data.map(item => {
			return `
				<option value="${item.province}">${item.name}</option>
			`
		}).join('')
		console.log(htmlStr);
		document.querySelector('#province').innerHTML = '<option value="">请选择省份</option>' + htmlStr
		// 需求：默认选中 天津市
		document.querySelector('#province').value=12
	</script>
</body>

</html>